<template>
  <div class="setting-container">
    <div class="clearfix">
      <el-button type="primary" class="fl-r" @click="handleGroup('add')">新建分组</el-button>
    </div>
    <el-table :data="groupList" class="mt20">
      <el-table-column prop="groupName" label="分组" />
      <el-table-column prop="telNumber" label="电话"/>
      <el-table-column prop="roomCount" label="房间数" />
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button link type="primary" @click="handleGroup('edit', scope.row)">编辑</el-button>
          <el-button link type="primary" @click="handleRemove(scope.row.groupId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="groupDialog.visible" :title="groupDialog.title" width="520px" @close="handleClose" :fullscreen="mobile">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item prop="groupName" label="分组名称">
          <el-input v-model="form.groupName" placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <el-form-item prop="telNumber" label="固定电话">
          <el-input v-model="form.telNumber" placeholder="请输入手机号或固定电话"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button plain @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Setting">
import useAppStore from '@/store/modules/app'
import { getList as getGroupList, save, edit, remove } from '@/api/setting/group'

const { proxy } = getCurrentInstance()

const groupList = ref([])
const mobile = computed(() => useAppStore().device === 'mobile')

const data = reactive({
  groupDialog: {
    visible: false,
    title: '新建分组',
    type: 'add'
  },
  form: {
    groupName: '',
    telNumber: ''
  },
  rules: {
    groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
    telNumber: [
      { required: true, message: '请输入手机号或固定电话', trigger: 'blur' },
      { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号或者固定电话', trigger: 'blur' },
    ]
  }
})
const { groupDialog, form, rules } = toRefs(data)

function resetForm () {
  form.value = {
    groupName: '',
    telNumber: ''
  }
  proxy.resetForm('formRef')
}
// 新增/编辑弹窗
function handleGroup(type, row) {
  resetForm()
  groupDialog.value.type = type
  if (type === 'add') {
    groupDialog.value.title = '新建分组'
    form.value = {
      groupName: '',
      telNumber: ''
    }
  } else if (type === 'edit') {
    groupDialog.value.title = '编辑分组'
    form.value = { ...row }
  }
  groupDialog.value.visible = true
}

// 删除分组
function handleRemove(id) {
  proxy.$modal.confirm('确认要删除分组').then(() => {
    remove([id]).then(res => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
  }).catch(() => {})
}

// 分组弹窗取消事件
function handleCancel() {
  groupDialog.value.visible = false
}


function handleClose() {
  groupDialog.value.visible = false
}
function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      if (groupDialog.value.type === 'add') {
        save(form.value).then(res => {
          proxy.$modal.msgSuccess('新增成功')
          getList()
          groupDialog.value.visible = false
        })
      } else if (groupDialog.value.type === 'edit') {
        const params = {
          groupId: form.value.groupId,
          groupName: form.value.groupName,
          telNumber: form.value.telNumber,
        }
        edit(params).then(res => {
          proxy.$modal.msgSuccess('编辑成功')
          getList()
          groupDialog.value.visible = false
        })
      }
    }
  })
}

function getList() {
  getGroupList().then(res => {
    groupList.value = res.rows
  })
}
getList()
</script>

